/*
 * @name: 线索列表
 * @Author: icepual
 * @Date: 2020-06-04
 */
<template>
    <div class="container sales-leads-wrap">
        <el-alert
            title="合同操作流程：1 点击操作中的下载合同；2 下载合同源件，并复制粘贴“下载合同”弹窗中给出的客户的内容，进行合同的填充；3 将填充完整的Word版的合同文档，另存为PDF格式；4 点击修改合同，将该PDF格式的合同上传，等待CEO审核"
            type="warning"/>
        <div class="content-wrapper">
            <el-row
                class="search-wrapper"
                :gutter="20"
            >
                <el-form
                    label-position="right"
                    label-width="84px"
                    ref="searchfrom"
                    size="small">


                    <el-form-item label="公司名称">
                        <el-input
                            v-model.trim="filterData.company_name"
                            placeholder="请输入公司名称"
                            type="text"
                            size="small"
                            style="width: 193px;"
                            @keyup.native.enter="getTableData(1)"
                        />
                    </el-form-item>

                    <el-form-item label="合同状态">
                        <el-select
                            v-model="filterData.contact_verify"
                            filterable
                            @change="getTableData(1)"
                            placeholder="请选择"
                        >
                            <el-option
                                v-for="(item, index) in contract_verify_list"
                                :key="index"
                                :label="item.name"
                                :value="item.status"
                            />
                        </el-select>
                    </el-form-item>
                </el-form>
            </el-row>

            <!-- table -->
            <div class="table-wrapper">
                <el-table
                    :data="tableData"
                    height="100%"
                    style="width: 100%;"
                    border
                    class="table-wrapper"
                    ref="tempLateName"
                >
                    <el-table-column
                        type="index"
                        width="80"
                        label="序号"
                        align="center"
                        fixed="left"
                    />
                    <el-table-column
                        prop="company_name"
                        label="公司名称"
                        show-overflow-tooltip
                        :formatter="emptyFormatter"
                        align="center"
                        fixed="left"
                        min-width="120"
                    />
                    <el-table-column
                        prop="hire_username"
                        label="注册手机号"
                        show-overflow-tooltip
                        :formatter="emptyFormatter"
                        align="center"
                    />
                    <!-- <el-table-column
                        prop="legal_name"
                        label="法人姓名"
                        show-overflow-tooltip
                        :formatter="emptyFormatter"
                        align="center"
                        min-width="120"
                    />
                    <el-table-column
                        prop="contact_name"
                        label="业务联系人姓名"
                        show-overflow-tooltip
                        :formatter="emptyFormatter"
                        align="center"
                        min-width="120"
                    />
                    <el-table-column
                        prop="shop_name"
                        label="店铺名称"
                        show-overflow-tooltip
                        :formatter="emptyFormatter"
                        align="center"
                        width="120"
                    /> -->
                    <el-table-column
                        prop="shop_url"
                        label="第三方平台链接"
                        width="120"
                    >
                        <template slot-scope="scope">
                            <a
                                target="_blank"
                                class="shop-url"
                                :href="scope.row.shop_url">{{ scope.row.shop_url }}</a>
                        </template>
                    </el-table-column>
                    <!-- <el-table-column
                        prop="contact_email"
                        label="联系邮箱"
                        show-overflow-tooltip
                        :formatter="emptyFormatter"
                        align="center"
                        min-width="120"
                    />
                    <el-table-column
                        prop="address"
                        label="联系地址"
                        show-overflow-tooltip
                        :formatter="emptyFormatter"
                        align="center"
                        min-width="150"
                    /> -->
                    <el-table-column
                        prop="contract_verify"
                        label="合同状态"
                        show-overflow-tooltip
                        :formatter="statusFormatter"
                        align="center"
                        fixed="right"
                    />
                    <el-table-column
                        prop="contract_verify_fail_reason"
                        label="合同未通过理由"
                        show-overflow-tooltip
                        :formatter="emptyFormatter"
                        align="center"
                        fixed="right"
                    />
                    <el-table-column
                        prop="remark"
                        label="备注"
                        show-overflow-tooltip
                        :formatter="emptyFormatter"
                        align="center"
                        fixed="right"
                    />
                    <el-table-column
                        label="操作"
                        align="center"
                        fixed="right"
                        :width="200"
                    >
                        <template slot-scope="scope">
                            <el-button
                                type="text"
                                class="btn-operate"
                                @click="fnShowDownDialog(scope.row)"
                            >
                                下载合同
                            </el-button>
                            <el-button
                                type="text"
                                class="btn-operate"
                                @click="fnShowChangeDialog(scope.row)"
                            >
                                上传合同
                            </el-button>
                            <el-button
                                type="text"
                                class="btn-operate"
                                @click="fnRemark(scope.row)"
                            >
                                备注
                            </el-button>
                        </template>
                    </el-table-column>
                </el-table>
            </div>
            <!-- /table -->

            <!-- /分页 -->
            <div class="pagination-wrapper clearfix">
                <el-pagination
                    background
                    layout="total, prev, pager, next"
                    :current-page.sync="page.now_page"
                    :total="page.total_count"
                    :page-size="page.page_size"
                    @current-change="getTableData"
                />
            </div>
        </div>
        <!-- 图片预览 -->
        <img-preview ref="preview" />
        <!-- 下载合同弹窗 -->
        <el-dialog
            title="下载合同"
            width="550px"
            :visible.sync="dialogDownloadShow">
            <div class="dialog-container">
                <div class="contract-dialog-title">1. 以下为客户提供的基础信息，请你直接点击复制，粘贴到合同的对应位置去</div>
                <div class="contract-dialog-list">
                    <div class="contract-dialog-item">
                        <div class="contract-dialog-text">合同编号：{{ downloadItem.contract_no }}</div>
                        <a
                            href="javascript:;"
                            :disabled="downloadItem.contract_no == '' ? true : false"
                            @click="handleInitCopy(downloadItem.contract_no)"
                            class="table-link copy-btn">复制</a>
                    </div>
                    <div class="contract-dialog-item">
                        <div class="contract-dialog-text">甲方：{{ downloadItem.company_name }}</div>
                        <a
                            href="javascript:;"
                            :disabled="downloadItem.company_name == '' ? true : false"
                            @click="handleInitCopy(downloadItem.company_name)"
                            class="table-link copy-btn">复制</a>
                    </div>
                    <!-- <div class="contract-dialog-item">
                        <div class="contract-dialog-text">法定代表人：{{ downloadItem.legal_name }}</div>
                        <a
                            href="javascript:;"
                            :disabled="downloadItem.legal_name == '' ? true : false"
                            @click="handleInitCopy(downloadItem.legal_name)"
                            class="table-link copy-btn">复制</a>
                    </div>
                    <div class="contract-dialog-item">
                        <div class="contract-dialog-text">联系人：{{ downloadItem.contact_name }}</div>
                        <a
                            href="javascript:;"
                            :disabled="downloadItem.contact_name == '' ? true : false"
                            @click="handleInitCopy(downloadItem.contact_name)"
                            class="table-link copy-btn">复制</a>
                    </div>
                    <div class="contract-dialog-item">
                        <div class="contract-dialog-text">联系邮箱：{{ downloadItem.contact_email }}</div>
                        <a
                            href="javascript:;"
                            :disabled="downloadItem.contact_email == '' ? true : false"
                            @click="handleInitCopy(downloadItem.contact_email)"
                            class="table-link copy-btn">复制</a>
                    </div>
                    <div class="contract-dialog-item">
                        <div class="contract-dialog-text">联系地址：{{ downloadItem.address }}</div>
                        <a
                            href="javascript:;"
                            :disabled="downloadItem.address == '' ? true : false"
                            @click="handleInitCopy(downloadItem.address)"
                            class="table-link copy-btn">复制</a>
                    </div>
                    <div class="contract-dialog-item">
                        <div class="contract-dialog-text">指定官方对接邮箱：{{ downloadItem.contact_email }}</div>
                        <a
                            href="javascript:;"
                            :disabled="downloadItem.contact_email == '' ? true : false"
                            @click="handleInitCopy(downloadItem.contact_email)"
                            class="table-link copy-btn">复制</a>
                    </div> -->
                </div>
                <div class="contract-dialog-title">2. 以下为合同中的其他需要你填写的字段，请对照检查，不要遗漏填写</div>
                <div class="contract-dialog-list">
                    <div class="contract-dialog-item">
                        <div class="contract-dialog-text">法定代表人：（请填写客户的法人姓名）</div>
                    </div>
                    <div class="contract-dialog-item">
                        <div class="contract-dialog-text">联系人：（请填写客户方对接人的姓名）</div>
                    </div>
                    <div class="contract-dialog-item">
                        <div class="contract-dialog-text">联系邮箱：（请填写客户公司的联系邮箱）</div>
                    </div>
                    <div class="contract-dialog-item">
                        <div class="contract-dialog-text">联系地址：（请填写客户公司的所在详细地址）</div>
                    </div>
                    <div class="contract-dialog-item">
                        <div class="contract-dialog-text">指定官方对接邮箱：（请填写客户公司的联系邮箱）</div>
                    </div>
                    <div class="contract-dialog-item">
                        <div class="contract-dialog-text">乙方-联系人： （请填写你自己的姓名）</div>
                    </div>
                    <div class="contract-dialog-item">
                        <div class="contract-dialog-text">保证金金额： xxx元（大写：x万圆整）</div>
                    </div>
                    <div class="contract-dialog-item">
                        <div class="contract-dialog-text">佣金比例：（销售额的x% ）</div>
                    </div>
                    <div class="contract-dialog-item">
                        <div class="contract-dialog-text">合同有效期年限：（有效期x年）</div>
                    </div>
                    <div class="contract-dialog-item">
                        <div class="contract-dialog-text">甲方-签署日期：（年-月-日，需要帮甲方填写）</div>
                    </div>
                    <div class="contract-dialog-item">
                        <div class="contract-dialog-text">乙方-签署日期：（年-月-日）</div>
                    </div>
                </div>
                <div class="contract-dialog-title">3. 下载合同</div>
                <div class="contract-dialog-list">
                    <div class="contract-dialog-item">
                        <a
                            download="合同.doc"
                            class="table-link"
                            :href="contract_template_url">下载合同</a>
                    </div>
                </div>
            </div>
            <div
                slot="footer"
                class="dialog-footer">
                <el-button
                    type="primary"
                    @click="dialogDownloadShow = false"
                >我知道了</el-button>
            </div>
        </el-dialog>
        <!-- 修改合同弹窗 -->
        <el-dialog
            title="修改合同"
            width="750px"
            :visible.sync="dialogContractChangeShow">
            <div>
                <div class="change-contract-dialog-title">请点击下方的上传按钮，上传你已经填充/修改完毕的合同文件，<span class="red">须知：为防止客户随意更改合同内容，你仅可以上传PDF格式文件。</span>所以，请先将Word格式的合同另存为PDF再上传</div>
                <el-form
                    :model="contractChangeForm"
                    :rules="contractChangeFormRules"
                    ref="contractChangeForm">

                    <el-form-item
                        prop="file"
                        label-width="20px">
                        <div
                            class="pic-value"
                            v-for="(item, index) in contractChangeForm.file"
                            :key="index"
                            style="background-image: url(//cdn.zsdx.cn/admin/images/common/pdf.png)"
                        >
                            <div
                                class="loading"
                                v-if="item.status=='uploading'"
                            >
                                <el-icon name="loading" />
                            </div>
                            <div class="cover">
                                <el-icon
                                    name="delete"
                                    @click.native="()=>{contractChangeForm.file.splice(index, 1);}"
                                />
                            </div>
                        </div>
                        <el-upload
                            v-if="dialogContractChangeShow"
                            v-show="!contractChangeForm.file.length > 0"
                            class="edit-upload-wrapper"
                            action="https://jsonplaceholder.typicode.com/posts/"
                            :http-request="fnUpload"
                            list-type="picture-card"
                            accept="application/pdf"
                            :file-list="contractChangeForm.file"
                            :show-file-list="false"
                            :on-change="fnUploadChange"
                            :multiple="false"
                        >

                            <div class="pic-value pic-empty">
                                <div class="pic-empty-container">
                                    <div class="pic-empty-img" />
                                    <div class="pic-empty-desc">+添加文件</div>
                                </div>
                            </div>
                        </el-upload>
                        <div
                            style="display: block; height: 20px;color: #88909c;font-size: 12px;position: relative;top: -10px;">仅限PDF格式文件</div>
                    </el-form-item>
                    <div class="change-contract-dialog-title">请再次输入并确认合同中的保证金金额以及合同服务年限</div>
                    <el-form-item
                        label="保证金金额"
                        label-width="100px"
                        prop="contract_money">
                        <el-input-number
                            v-model="contractChangeForm.contract_money"
                            :min="1"
                            :controls="false"
                            :step="1"
                            :precision="2"
                            :step-strictly="true"/>
                        <span>元</span>
                    </el-form-item>
                    <el-form-item
                        label="增值服务费"
                        label-width="100px"
                    >
                        <el-input-number
                            v-model="contractChangeForm.vas_money"
                            :min="0"
                            :controls="false"
                            :step="1"
                            :precision="2"
                            :step-strictly="true"/>
                        <span>元</span>
                    </el-form-item>
                    <el-form-item
                        label="增值服务备注"
                        label-width="100px"
                    >
                        <el-input
                            v-model="contractChangeForm.vas_remark"
                            type="textarea"
                            placeholder="请填写增值服务备注"
                            :autosize="{ minRows: 2, maxRows: 6 }"
                            style="width: 500px;"
                        />
                    </el-form-item>
                    <el-form-item
                        label="合同年限"
                        label-width="100px"
                        prop="contract_valid_year">
                        <el-select
                            class="year-input"
                            v-model="contractChangeForm.contract_valid_year"
                            placeholder="请选择">
                            <el-option
                                v-for="item in yearList"
                                :key="item.value"
                                :label="item.label"
                                :value="item.value"/>
                        </el-select>
                        <el-input-number
                            class="year-input"
                            v-if="contractChangeForm.contract_valid_year == -1"
                            v-model="contractChangeForm.contract_valid_year_extra"
                            :min="1"
                            :controls="false"
                            :step="1"
                            :precision="0"
                            :step-strictly="true"/>
                        <span class="year-unit">年</span>
                    </el-form-item>
                </el-form>
            </div>
            <div
                slot="footer"
                class="dialog-footer">
                <el-button @click="fnResetForm('contractChangeForm')">取 消</el-button>
                <el-button
                    type="primary"
                    @click="fnSubmitChange()"
                >确 定</el-button>
            </div>
        </el-dialog>
    </div>
</template>

<script>
import imgPreview from '@/components/common/img-preview';
import { back } from '@/mixin/back';
import Clipboard from 'clipboard';
export default {
    /**
     * @param   {Boolean}    checkIndeterminate         是否选中数据
     * @param   {Array}      multipleSelection          全选的数据
     * @param   {Boolean}    checkedAll                 是否全选
     * @param   {Object}     head                       筛选字段
     * @param   {Object}     filterData                 排序
     * @param   {Object}     page                       分页
     * @param   {Array}      tableData                  数据列表
     * @param   {OBject}     authResult                 权限列表
     */
    mixins: [back],
    components: {
        imgPreview
    },
    data () {
        return {
            checkIndeterminate: false,
            multipleSelection: [],
            checkedAll: false,
            clipboardDemo:'',
            head: {
                name: ''
            },
            filterData: {
                company_name: '',
                sales_leads_contract_verify: '99'
            },
            contract_verify_list:[{
                name:'全部',
                status: '99'
            },{
                name:'未修改',
                status: '0'
            },{
                name:'待审核',
                status: '1'
            },{
                name:'审核通过',
                status: '2'
            },{
                name:'审核不通过',
                status: '-1'
            }],
            yearList: [{
                label: 1,
                value:1
            },{
                label: 2,
                value: 2
            },{
                label: 3,
                value: 3
            },{
                label: '其他',
                value: -1
            }],
            page: {
                now_page: 1,
                total_count: 0,
                page_size: 0
            },
            tableData: [],
            authResult: {},
            dialogDownloadShow: false,
            downloadItem: {},
            dialogContractChangeShow: false,
            contractChangeForm: {
                file: [],
                contract_money : 10000,
                contract_valid_year: 1,
                contract_valid_year_extra: 4,
                contract_url: '',
                hire_no: '',
                vas_remark: '',
                vas_money: 0
            },
            contractChangeFormRules: {
                hire_no: [
                    { required: true, message: '请选择合同', trigger: 'blur' },
                ],
                contract_money: [
                    { required: true, message: '请输入合同金额', trigger: 'blur' },
                ],
                contract_valid_year: [
                    { required: true, message: '请输入合同有效年份', trigger: 'blur' },
                ],
                file: [
                    { required: true, message: '请上传合同', trigger: 'change' },
                    { validator: this.checkFile, trigger: 'change' },
                ],
            },
            contract_template_url:''
        };
    },
    filters: {},
    computed: {},
    watch: {},
    mounted () {
        this.$store.commit('SET_HEADER', [{ title: "官网"},{title: '我的线索'}]);
        this.authResult = this.$route.meta.authResult;
        this.getTableData(1);
    },
    methods: {
        checkFile(rule, value, callback){
            if (!value || value[0].status !== 'success'){
                return callback(new Error('请等待合同上传完毕'));
            }
            return callback();
        },
        /**
         * 获取表格数据
         */
        getTableData (page) {
            this.$post('/student/hire_user_sales_leads%5Cget_my_list', {
                page_id: page || this.page.now_page,
                ...this.filterData
            }, resp => {
                if (resp.code == 1) {
                    this.tableData = resp.data.list;
                    this.page.now_page = resp.data.page.now_page;
                    this.page.total_count = resp.data.page.total_count;
                    this.page.page_size = resp.data.page.page_size;
                    this.contract_template_url = resp.data.contract_template_url;
                }
            });
        },

        /**
         * 排序
         */
        fnEditSort (row) {
            this.$prompt('请输入排序号', '提示', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                inputPattern: /^([1-9]\d?|[1-9]\d+)$/,
                inputErrorMessage: '排序号格式不正确,请重新输入'
            }).then(({ value }) => {
                this.$post('',{
                    //
                },resp=>{
                    if (resp.code == 1) {
                        this.getTableData();
                        this.$message({
                            type: 'success',
                            message: '操作成功'
                        });
                    } else if (resp.code == 0) {
                        this.$message({
                            type: 'warning',
                            message: resp.msg
                        });
                    }
                });
            });
        },

        /**
         * 数据排序
         */
        handleSortChanged(data) {
            let sortTypeMap = {
                ascending: 'asc',
                descending: 'desc'
            };

            let sortFieldMap = {
                //TOD
            };

            if (data.order) {
                this.filterData.sort_field = sortFieldMap[data.prop];
                this.filterData.sort_type = sortTypeMap[data.order];
            } else {
                this.filterData.sort_field = '';
                this.filterData.sort_type = '';
            }

            this.getTableData();
        },

        /**
         * 全选逻辑操作
         */
        fnSelect(selection) {
            if(selection.length == this.tableData.length) {
                this.checkedAll = true;
            }else{
                this.checkedAll = false;
            }
            if(selection.length > 0 && selection.length < this.tableData.length) {
                this.checkIndeterminate = true;
            }else{
                this.checkIndeterminate = false;
            }
        },
        fnSelectAllTop(selection) {
            if(selection.length > 0) {
                this.checkedAll = true;
            }else{
                this.checkedAll = false;
            }
            if(selection.length > 0 && selection.length < this.tableData.length) {
                this.checkIndeterminate = true;
            }else{
                this.checkIndeterminate = false;
            }
        },
        fnChangeChecked() {
            if(this.checkedAll){
                this.toggleSelection(1);
            }else{
                this.toggleSelection();
            }
        },
        toggleSelection(rows) {
            if (rows) {
                this.$refs.tempLateName.toggleAllSelection();
            } else {
                this.$refs.tempLateName.clearSelection();
            }
        },
        handleSelectionChange(val) {
            this.multipleSelection = val;
        },

        /**
         * 查看图片
         * @param   {String}    images      //单图预览
         * @param   {Array}     images      //多图预览
         */
        fnShowPreview(images) {
            if(images && Object.prototype.toString.call(images) == '[object String]') {
                this.$refs.preview.show([
                    images
                ]);
            } else if (images && Object.prototype.toString.call(images) == '[object Array]') {
                this.$refs.preview.show(images);
            } else {
                this.$message({
                    type: 'warning',
                    message: '图片类型错误'
                });
            }
        },

        /**
         * 过滤函数
         */
        emptyFormatter(row, column, val) {
            if (!val) return '--';
            return val;
        },


        statusFormatter(row, column, val) {
            if (!val) return '--';
            for(var i in this.contract_verify_list){
                if(this.contract_verify_list[i].status == val){
                    return this.contract_verify_list[i].name;
                }
            }
            return '--';
        },
        fnResetForm(formName) {
            this.dialogContractChangeShow = false;
            this.contractChangeForm = {
                file: [],
                contract_money : 10000,
                contract_valid_year: 1,
                contract_valid_year_extra: 4,
                contract_url: '',
                hire_no: '',
            };
            this.$refs[formName].clearValidate();
        },

        fnRemark(item){
            this.$prompt('请输入备注', '', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
            }).then(({ value }) => {
                this.$post('/student/hire_user_sales_leads%5Cremark', {
                    hire_no: item.hire_no,
                    remark:value
                }, resp => {
                    if(resp.code == 1){
                        this.$notify({
                            title: '成功',
                            message: '操作成功',
                            type: 'success'
                        });
                        item.remark = value;
                    }else{
                        this.$notify({
                            title: '警告',
                            message: resp.msg,
                            type: 'warning'
                        });
                    }
                });
            }).catch(() => {
            });

        },
        fnShowContract(url){
            window.open(url);
        },
        fnShowDownDialog(item){
            this.downloadItem = item;
            this.dialogDownloadShow = true;
        },
        fnShowChangeDialog(item){
            this.changeItem = item;
            this.contractChangeForm = {
                file: [],
                contract_money : 10000,
                contract_valid_year: 1,
                contract_valid_year_extra: 4,
                contract_url: '',
                hire_no: item.hire_no,
                vas_remark: '',
                vas_money: 0
            };
            this.dialogContractChangeShow = true;
        },

        /** 上传组件回调 文件队列修改 */
        fnUploadChange(file, fileList) {
            console.log('change', file);
            this.contractChangeForm.file = fileList;
        },
        /** 上传组件回调 上传成功 */
        fnUploadSuccess(resp, file, fileList) {
            // file.uploadUrl = resp.url;
        },
        fnUpload(e) {
            let pic = new FormData();

            pic.append('file', e.file);
            this.$upload({
                url: '/__local/common%5Cupload',
                data: pic,
                progress: e.onProgress,
                success: resp => {
                    if (resp.code == 1) {
                        // 调用组件成功回调,修改样式
                        e.onSuccess(resp.data, {
                            url: resp.data.url
                        }, this.fileList);
                    } else {
                        // 失败后调用组件error回调,删除对应元素
                        e.onError(resp.msg);
                        this.$message({
                            type: 'warning',
                            message: '上传图片失败',
                            center: true
                        });
                    }
                }
            });
        },
        fnSubmitChange(){
            if(this.submitting){
                return;
            }
            this.submitting = true;
            this.$refs.contractChangeForm.validate(valid => {
                if(valid){
                    this.$post('/student/hire_user_sales_leads%5Ccontract_submit', {
                        contract_money : this.contractChangeForm.contract_money,
                        contract_valid_year: this.contractChangeForm.contract_valid_year > 0 ? this.contractChangeForm.contract_valid_year :this.contractChangeForm.contract_valid_year_extra,
                        contract_url: this.contractChangeForm.file[0].response.url,
                        hire_no: this.contractChangeForm.hire_no,
                        vas_remark: this.contractChangeForm.vas_remark,
                        vas_money: this.contractChangeForm.vas_money
                    }, resp => {
                        this.submitting = false;
                        if (resp.code == 1) {
                            this.getTableData();
                            this.$notify({
                                title: '成功',
                                message: '操作成功',
                                type: 'success'
                            });
                            this.downloadItem.contract_verify = 1;
                            this.dialogContractChangeShow = false;
                        } else if (resp.code == 0) {
                            this.$notify({
                                title: '成功',
                                message: '操作成功',
                                type: 'warning'
                            });
                        }
                    });
                }
            });
        },
        /**
         * 复制链接
         */
        handleInitCopy(link) {
            this.$notify.closeAll();
            if(this.clipboardDemo){
                this.clipboardDemo.destroy();
            }
            this.clipboardDemo = new Clipboard('.copy-btn', {
                text: function () {
                    return link;
                }
            });

            this.clipboardDemo.on('success', e => {
                console.log('copy');
                // this.$message({
                //     type: 'success',
                //     message: '复制成功'
                // });
                this.$notify({
                    title: '成功',
                    message: '复制成功',
                    type: 'warning',
                    duration:1500
                });
                e.clearSelection();
            });

            this.clipboardDemo.on('error', e => {
                // this.$message({
                //     type: 'warning',
                //     message: '未复制成功，请手动复制'
                // });
                this.notify = this.$notify({
                    title: '成功',
                    message: '未复制成功，请手动复制',
                    type: 'warning',
                    duration:1500
                });
            });
        }
    }
};
</script>

<style lang="less" scoped>
    .container {
        display: flex;
        flex-direction: column;
        width: 100%;
        .header-nav {
            position: relative;
            display: flex;
            flex-wrap: wrap;
            align-items: center;
            justify-content: space-between;
            .header-left, .header-right {
                display: flex;
                align-items: center;
            }
            .header-new-box {
                display: flex;
                margin-right: 15px;
                align-items: center;
                color: #606266;
                margin-bottom: 10px;
                &-title {
                    margin-right: 2px;
                    white-space: nowrap;
                }
            }
        }
        /* 表单 */
        .scope-price {
            width: 50px;
            height: 50px;
        }
        /* 字体高亮 */
        .cursor-font {
            color: rgb(64, 158, 255);
            cursor: pointer;
        }
        /* 分页 */
        .pagination-wrapper {
            padding-top: 10px;
            padding-bottom: 10px;
            .el-pagination {
                float: right;
                padding: 0;
                background-color: transparent;
            }
        }
    }
    /* 排序 */
    .sort-wrap {
        display: flex;
        align-items: center;
        cursor: pointer;
        .sort-spliter {
            width: 1px;
            height: 12px;
            background: rgba(235, 235, 235, 1);
            margin: 0 10px;
            }
            .btn-sort {
            font-size: 14px;
            line-height: 1;
            color: #ccc;
            &:hover {
                color: #20a0ff;
            }
        }
    }
    .el-button-left {
        margin-left: 40px;
    }
    .el-button-right {
        margin-right: 10px;
    }
    .content-wrapper {
        flex: 1;
        display: flex;
        flex-direction: column;
        margin: 15px;
        overflow: hidden;
    }
    .table-wrapper {
        flex: 1;
        background-color: #fff;
        .normal{
            color: #606266;
        }
        .el-button {
        padding: 0;
        }
        .icon-bianji {
        font-size: 14px;
        color: #b9b9b9;
        cursor: pointer;
        }
        .btn-delete {
        color: #fd4d32;
        &.is-disabled {
            color: #c0c4cc;
            cursor: not-allowed;
        }
        }
        .submit-config-item {
        display: inline-block;
        position: relative;
        padding-right: 10px;
        font-size: 14px;

        & + .submit-config-item {
            padding-left: 10px;
            &::before {
            content: "";
            position: absolute;
            top: 50%;
            left: 0;
            width: 1px;
            height: 14px;
            transform: translate(0, -50%);
            background-color: #d8d8d8;
            }
        }

        .num {
            vertical-align: middle;
        }
        .iconfont {
            font-size: 16px;
            color: #b9b9b9;
            vertical-align: middle;
        }

        .icon-tupian {
            font-size: 20px;
        }
    }
  }
  .search-wrapper {
    padding: 15px;
    background-color: #fff;
  }

  .contract-dialog-title{
    font-size: 14px;
    color: #606266;
    font-weight: 500;
    line-height: 20px;
  }
  .contract-dialog-list{
      margin: 20px 30px;
  }
  .contract-dialog-item{
      display: flex;
      justify-content: flex-start;
      align-items: center;
      margin: 15px 0;
      .el-button{
          padding: 0 20px !important;
      }
  }
  .change-contract-dialog-title{
    font-size: 14px;
    color: #606266;
    font-weight: 500;
    line-height: 20px;
    margin-bottom: 20px;
    .red{
        color: #f56c6c;
    }
  }
.info-input{
    width: 120px;
}
.dialog-tip{
    margin-bottom: 20px;
}
.server_desc {
    color: rgba(63, 69, 75, 1);
    font-size: 14px;
    margin: 0 10px;
    white-space: nowrap;
    display: inline;
}
.server_tips {
    color: rgba(153, 153, 153, 1);
    font-size: 12px;
    white-space: nowrap;
}
.service_money {
    font-size: 16px;
    font-weight: 500;
}
.year-input{
    width: 80px;
}

.copy-btn{
    color: #20a0ff;
    margin-left: 20px;
}
.table-link{
    color: #20a0ff;
    &:active{
        opacity: 0.7;
    }
}
</style>
<style lang="less">
    .sales-leads-wrap{
        .el-table__body-wrapper .el-table__body .el-table__row td {
            border-right: none;
        }
        .el-table__header-wrapper .el-table__header .has-gutter tr th {
            border-right: none;
        }
        .el-table .el-table_1_column_6  .cell {
            position: relative;
        }
        .el-range-editor--small .el-range-separator{
            padding: 0 1px !important;
        }
        .search-wrapper{
            .el-form-item{
                display: inline-block;
            }
        }
        .table-wrapper{
            .el-button {
                padding: 0;
            }
        }
    }
    .pic {
      &-list {
        width: 100%;
      }
      &-unit {
        position: relative;
        margin-bottom: 12px;
        .edit-upload-wrapper {
          display: inline-block;
          vertical-align: top;
          width: 146px;
          height: 146px;
          .el-upload--picture-card {
            width: 146px;
            height: 146px;
          }
        }
      }
      &-label {
        font-size: 14px;
        font-weight: 500;
        color: rgba(0, 0, 0, 0.85);
        line-height: 22px;
      }
      &-value {
        display: inline-block;
        width: 146px;
        height: 146px;
        background-position: center;
        background-size: 165px 165px;
        background-repeat: no-repeat;
        // margin-top: 12px;
        // border: 1px solid rgba(51, 120, 222, 0.21);
        position: relative;
        &:hover {
          .cover {
            opacity: 1;
          }
          .loading {
            opacity: 0;
          }
        }
        .cover {
          position: absolute;
          top: 50%;
          left: 50%;
          transform: translate(-50%, -50%);
          width: 146px;
          height: 146px;
          text-align: center;
          background-color: rgba(0, 0, 0, 0.5);
          opacity: 0;
          transition: all 0.5s;
          border-radius: 33px;
          transition: all ease-in-out 0.3s;

        .el-icon-delete {
            cursor: pointer;
            font-size: 26px;
            color: #fff;
            line-height: 146px;
          }
        }
        .loading {
          position: absolute;
          top: 50%;
          left: 50%;
          transform: translate(-50%, -50%);
          width: 146px;
          height: 146px;
          text-align: center;
          background-color: rgba(0, 0, 0, 0.5);
          opacity: 1;
          transition: all 0.5s;
          border-radius: 33px;
          transition: all ease-in-out 0.3s;

          .el-icon-loading {
            font-size: 26px;
            color: #fff;
            line-height: 146px;
          }
        }
        .percent{
            position: absolute;
            top: 80%;
            left:50%;
            transform: translateX(-50%);
            color: #fff;
        }
      }
      &-empty {
        position: relative;
        // background: rgba(255, 255, 255, 1);
        // border: 1px solid rgba(51, 120, 222, 0.21);
        &-container {
          position: absolute;
          left: 50%;
          top: 50%;
          transform: translate(-50%, -50%);
          text-align: center;
        }
        &-img {
          width: 53px;
          height: 42px;
          margin: 0 auto;
          background-position: center;
          background-size: cover;
          background-repeat: no-repeat;
          background-image: url(//cdn.zsdx.cn/admin/images/student/pic-empty.png);
        }
        &-desc {
          margin-top: 8px;
          font-size: 14px;
          font-weight: 400;
          color: rgba(0, 0, 0, 0.3);
          line-height: 20px;
          text-align: center;
        }
      }
    }
</style>
